<!DOCTYPE html>
<html>
<head>
    <title>StudioLive remote control panel</title>
    <script src="scripts/jquery.min.js" type="text/javascript"></script>
    <script src="scripts/script.js" type="text/javascript"></script>
    <link rel="stylesheet" href="styles/style.css">
    <script src="scripts/colpick.js" type="text/javascript"></script>
    <link rel="stylesheet" href="styles/colpick.css" type="text/css" />
</head>
<body>
    <div id="currentScriptID">
        <table>
            <tr>
                <td><div id="currentScriptIDContent"></div></td>
                <td style="width: 100px;">
                    <div id="topNextButton" class="topButton"><p>NEXT</p></div>
                </td>
                <td style="width: 100px;">
                    <div id="topChatButton" class="topButton"><p>CHAT</p></div>
                </td>
            </tr>
        </table>
    </div>
    <div class="controlDiv">
        <h2>Standard controls & Window controls</h2>
        <table>
            <tr>
                <td>
                    <div>
                        <table>
                            <tr>
                                <td>
                                    <div data-command="runLogo" data-options="" class="button orangeButton"><p>show logo</p></div>
                                    <div class="buttonHelp"><p>Show the logo on the screen.</p></div>
                                </td>
                                <td>
                                    <div data-command ="runColor" data-options="{0}" class="button orangeButton" id="colorButton"><p>show color</p></div>
                                    <div class="buttonHelp"><p>Show the selected color on the screen.</p></div>
                                </td>
                                <td>
                                    <div data-command ="runBlack" data-options="" class="button orangeButton"><p>set black</p></div>
                                    <div class="buttonHelp"><p>Set screen black.</p></div>
                                </td>
                                <td>
                                    <div data-command="runWhite" data-options="" class="button orangeButton"><p>set white</p></div>
                                    <div class="buttonHelp"><p>Set screen white.</p></div>
                                </td>
                                <td>
                                    <div data-command="windowFullScreen" data-options="" class="button greenButton"><p>full screen</p></div>
                                    <div class="buttonHelp"><p>Set full screen.</p></div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div data-command="windowMaximize" data-options=""  class="button greenButton"><p>maximize screen</p></div>
                                    <div class="buttonHelp"><p>Maximize the screen.</p></div>
                                </td>
                                <td>
                                    <div data-command="windowMinimize" data-options=""  class="button greenButton"><p>minimize screen</p></div>
                                    <div class="buttonHelp"><p>Minimize the screen.</p></div>
                                </td>
                                <td>
                                    <div data-command="windowWindowed" data-options="" class="button greenButton"><p>set screen windowed</p></div>
                                    <div class="buttonHelp"><p>Window the screen.</p></div>
                                </td>
                                <td>
                                    <div data-command="stopMedia" data-options="" class="button redButton"><p>stop video and music</p></div>
                                    <div class="buttonHelp"><p>Stop all music.</p></div>
                                </td>
                                <td>
                                    <div data-command="currentMedia" data-options=""  class="button redButton"><p>current media</p></div>
                                    <div class="buttonHelp"><p>Show currently playing media.</p></div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div data-command="play" data-options="video" class="button redButton"><p>Play video</p></div>
                                    <div class="buttonHelp"><p>Continue paused video.</p></div>
                                </td>
                                <td>
                                    <div data-command="pause" data-options="video" class="button redButton"><p>Pause video</p></div>
                                    <div class="buttonHelp"><p>Pause playing video.</p></div>
                                </td>
                                <td>
                                    <div data-command="play" data-options="music" class="button redButton"><p>Play music</p></div>
                                    <div class="buttonHelp"><p>Continue paused music.</p></div>
                                </td>
                                <td>
                                    <div data-command="pause" data-options="music" class="button redButton"><p>Pause music</p></div>
                                    <div class="buttonHelp"><p>Pause music</p></div>
                                </td>

                            </tr>
                        </table>
                    </div>
                    <h2>Script controls</h2>
                    <div>
                        <table style="width: 1119px;">
                            <tr>
                                <td>
                                    <div data-command="scriptStart" data-options=""  class="button blueButton"><p>start</p></div>
                                    <div class="buttonHelp"><p>Start from beginning.</p></div>
                                </td>
                                <td>
                                    <div data-command="scriptPrevious" data-options="" class="button blueButton"><p>previous</p></div>
                                    <div class="buttonHelp"><p>Show the previous item.</p></div>
                                </td>
                                <td>
                                    <div data-command="scriptNext" data-options=""  class="button blueButton"><p>next</p></div>
                                    <div class="buttonHelp"><p>Show the next item.</p></div>
                                </td>
                                <td>
                                    <div data-command="reloadScript" data-options=""  class="button blueButton"><p>reload</p></div>
                                    <div class="buttonHelp"><p>Reload the script</p></div>
                                </td>
                                <td>
                                    <div class="button blueButton" id="scriptButton"><p>script ></p></div>
                                    <div class="buttonHelp"><p>Show script.</p></div>
                                </td>
                            </tr>
                        </table>
                        <div id="scriptDiv">
                            <table>
                                <tr>
                                    <td>No data available.</td>
                                </tr>
                                <tr>
                                    <td>No data available.</td>
                                </tr>
                                <tr>
                                    <td>No data available.</td>
                                </tr>
                                <tr>
                                    <td>No data available.</td>
                                </tr>
                                <tr>
                                    <td>No data available.</td>
                                </tr>

                            </table>
                        </div>
                    </div>
                    <h2>Live show controls</h2>
                    <div>
                        <table style="width: 1119px;">
                            <tr>
                                <td>
                                    <div data-command="runVideo" data-options="{0},autostart" class="button blackButton"><p>play video source</p></div>
                                    <div class="buttonHelp"><p>Play video with given source immediately.</p></div>
                                </td>
                                <td>
                                    <div data-command="runPhoto" data-options="{0}" class="button blackButton"><p>play image source</p></div>
                                    <div class="buttonHelp"><p>Show image with given source.</p></div>
                                </td>
                                <td>
                                    <div data-command="runMusic" data-options="{0},autostart" class="button blackButton"><p>play music source</p></div>
                                    <div class="buttonHelp"><p>Play music with given source immediately.</p></div>
                                </td>
                                <td>
                                    <div data-command="runCachedVideo" data-options="" class="button blackButton"><p>play loaded video</p></div>
                                    <div class="buttonHelp"><p>Start playing previously loaded video.</p></div>
                                </td>
                                <td>
                                    <div data-command="runCachedMusic" data-options="" class="button blackButton"><p>play loaded music</p></div>
                                    <div class="buttonHelp"><p>Start playing previously loaded music</p></div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div data-command="runVideo" data-options="{0}" class="button blackButton" id="scriptButton"><p>load video</p></div>
                                    <div class="buttonHelp"><p>Load video, but don't play yet.</p></div>
                                </td>
                                <td>
                                    <div data-command="runMusic" data-options="{0}" class="button blackButton" id="scriptButton"><p>load music</p></div>
                                    <div class="buttonHelp"><p>Load music, but don't play yet.</p></div>
                                </td>
                                <td>
                                    <div class="menu"><p>Source</p></div>
                                    <div class="menuHelp"><p><input id="sourceInput" /></p></div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
                <td id="logTD">
                    <textarea id="logTextArea"></textarea>
                </td>
            </tr>
        </table>
    </div>
    <div id="fullScreenScriptDiv">

    </div>
    <div id="chatDiv">
        <div id="chatTopDiv">
            <input id="chatInput" />
        </div>
        <iframe id="chatBox">

        </iframe>
    </div>
</body>
</html>